<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <script src="js/filters.js"></script>
</head>
<body>
    <div id="app">
        {{user_text}}
    </div>

    <script>

        // vm初始化时会有以下几个阶段
        // 1. vm对象创建

        // 2. vm对象把数据添加到data属性中

        // 3. vm对象显示数据到视图模板html页面中

        var vm1 = new Vue({
            el:"#app",
            data:{
                user_text:"用户名长度只能是4-10位"
            },
            // vm对象把数据添加到data属性之前
            beforeCreate(){
                console.log("--------beforeCreate---------");
                console.log("$data=",this.$data);
                console.log("$el",this.$el);
                console.log("user_text="+this.user_text)
            },
            // vm对象把数据添加到data属性之后
            created(){
                // 使用ajax到后台获取数据给data
                console.log("----------created-------------");
                console.log("$data=",this.$data);
                console.log("$el",this.$el);
                console.log("user_text="+this.user_text)
            },

            // vm对象显示数据到视图模板html页面之前
            // 如果执行 beforeMount，则表示vm对象已经获取到模板ID对象
            beforeMount(){
                console.log("----------beforeMount-------------");
                console.log("$el",this.$el);
            },
            // vm对象显示数据到视图模板html页面以后
            mounted(){
                // 使用ajax或者js在页面刷新前，完成页面修改的操作
                console.log("----------mounted-------------");
                console.log("$el",this.$el);
            }
        })
    </script>

</body>
</html>
